<template>
  <div class="home">
      <div class="banner">
        <img src="@/assets/images/banner_001.jpg" alt="">
      </div>
      <div class="vedio wrapper">
        <h3 class="h3">
          <i></i>
          火锅文化
        </h3>
        <video controls muted autoplay src="@/assets/images/vedio.mp4"></video>
      </div>
      <div class="company wrapper">
          <h3 class="h3">
          <i></i>
          企业文化
          </h3>
          <p>海底捞始终秉承“服务至上、顾客至上”的理念，以创新为核心，改变传统的标准化、单一化的服务，提倡个性化的特色服务，将用心服务作为基本理念，致力于为顾客提供“贴心、温心、舒心”的服务；在管理上，倡导双手改变命运的价值观，为员工创建公平公正的工作环境，实施人性化和亲情化的管理模式，提升员工价值。</p>
          <ComPosition></ComPosition>
      </div>
  </div>
</template>

<script>
import ComPosition from './home/ComPosition.vue'
export default {
  name:'Home',
  components:{ComPosition}
}
</script>

<style lang="less" scoped>
.wrapper{
  margin: 0 auto;
}
.home{
  margin-top: -20px;
  width: 100%;
  .banner{
    width: 100%;
    img{
      width: 100%;
    }
  }
  .h3{
      font-size: 28px;
      text-align: center;
      margin-bottom: 40px;
      color: #666;
      font-weight: 700;
      i{
        display: inline-block;
        vertical-align: middle;
        width: 45px;
        height: 59px;
        background: url() no-repeat 0;
        margin-right: -27px;
        background-size: cover;
      }
    }
  .vedio{
    margin-top: 40px;
    width: 1200px;
    // height: 600px;
    // background-color: pink;
    
    video{
      width: 100%;
      // height: 600px;
    }
  }
  .company{
    margin-top: 40px;
    width: 1200px;
    p{
      color: #888;
      font-size: 16px;
      text-align: center;
    }
  }
}
</style>